<template>
	<view class="container">
		<view
			style="width: 100%; height: 156rpx; display: flex; align-items: center; justify-content: space-evenly; position: fixed; bottom: 0; left: 0; background-color: #fff">
			<view @click="changetab(1)"
				style="display: flex; align-items: center; justify-content: center; flex-direction: column">
				<image v-if="tabbarindex == 1" style="width: 40rpx; height: 40rpx" src="../static/tabbar/indexact.png"
					mode=""></image>
				<image v-else style="width: 40rpx; height: 40rpx" src="../static/tabbar/index.png" mode=""></image>
				<view v-if="tabbarindex == 1" style="font-weight: 400; font-size: 24rpx; color: #151515">首页</view>
				<view v-else style="font-weight: 400; font-size: 24rpx; color: #666666">首页</view>
			</view>

			<view @click="changetab(2)"
				style="display: flex; align-items: center; justify-content: center; flex-direction: column">
				<image v-if="tabbarindex == 2" style="width: 40rpx; height: 40rpx" src="../static/tabbar/dynamicact.png"
					mode=""></image>
				<image v-else style="width: 40rpx; height: 40rpx" src="../static/tabbar/dynamic.png" mode=""></image>
				<view v-if="tabbarindex == 2" style="font-weight: 400; font-size: 24rpx; color: #151515">动态</view>
				<view v-else style="font-weight: 400; font-size: 24rpx; color: #666666">动态</view>
			</view>

			<image @click="changetab(5)" src="../static/tabbar/push.png" style="width: 104rpx; height: 60rpx" mode="">
			</image>

			<view @click="changetab(3)"
				style="display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; top: 0; left: 0">
				<image v-if="tabbarindex == 3" style="width: 40rpx; height: 40rpx" src="../static/tabbar/messageact.png"
					mode=""></image>
				<image v-else style="width: 40rpx; height: 40rpx" src="../static/tabbar/message.png" mode=""></image>
				<view v-if="tabbarindex == 3" style="font-weight: 400; font-size: 24rpx; color: #151515">消息</view>
				<view v-else style="font-weight: 400; font-size: 24rpx; color: #666666">消息</view>
				<view v-if="unreadmsg != 0" style="
            position: absolute;
            right: -14rpx;
            top: -14rpx;
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            text-align: center;
            line-height: 30rpx;
            background-color: red;
            color: #fff;
            font-weight: 400;
            font-size: 20rpx;
            color: #ffffff;
          ">
					{{ unreadmsg }}
				</view>
			</view>

			<view @click="changetab(4)"
				style="display: flex; align-items: center; justify-content: center; flex-direction: column">
				<image v-if="tabbarindex == 4" style="width: 40rpx; height: 40rpx" src="../static/tabbar/mineact.png"
					mode=""></image>
				<image v-else style="width: 40rpx; height: 40rpx" src="../static/tabbar/mine.png" mode=""></image>
				<view v-if="tabbarindex == 4" style="font-weight: 400; font-size: 24rpx; color: #151515">我的</view>
				<view v-else style="font-weight: 400; font-size: 24rpx; color: #666666">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabbarindex: Number,
			unreadmsg: Number
		},

		data() {
			return {};
		},

		created() {
			console.log('父组件内的', this.tabbarindex);
		},
		computed: {
			messagenum() {}
		},
		methods: {
			changetab(index) {
				// if (index != 5) {
				//   uni.setStorageSync('tabbarindex', index);
				// }
				this.$emit('choosetab', index);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {}
</style>